<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/pages/include/taglib.jsp"%>
<!DOCTYPE html>
<html>

<head>
  <!-- Meta, title, CSS, favicons, etc. -->
  <meta charset="utf-8">
  <title>后台管理系统</title>

  <link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'>
  <%@ include file="/WEB-INF/pages/include/baseCSS.jsp"%>
</head>

<body class="external-page sb-l-c sb-r-c">

  <!-- Start: Main -->
  <div id="main" class="animated fadeIn">

    <!-- Start: Content-Wrapper -->
    <section id="content_wrapper">

      <!-- begin canvas animation bg -->
      <div id="canvas-wrapper">
        <canvas id="demo-canvas"></canvas>
      </div>

      <!-- Begin: Content -->
      <section id="content">

        <div class="admin-form theme-info" id="login1">

          <div class="row mb15 table-layout">

            <div class="col-xs-6 va-m pln">
              <a href="dashboard.html" title="Return to Dashboard">
                <img src="${ctxStatic}/assets/img/logos/logo_white.png" title="AdminDesigns Logo" class="img-responsive w250">
              </a>
            </div>

            <div class="col-xs-6 text-right va-b pr5">
              <div class="login-links">
                <a href="pages_login.html" class="active" title="登录">登录</a>
                <span class="text-white"> | </span>
                <a href="pages_register.html" class="" title="注册">注册</a>
              </div>

            </div>

          </div>

          <div class="panel panel-info mt10 br-n">

            <div class="panel-heading heading-border bg-white">
              <span class="panel-title hidden">
                <i class="fa fa-sign-in"></i>注册</span>
              <div class="section row mn">
                <div class="col-sm-4">
                  <a href="#" class="button btn-social facebook span-left mr5 btn-block">
                    <span>
                      <i class="fa fa-facebook"></i>
                    </span>Facebook</a>
                </div>
                <div class="col-sm-4">
                  <a href="#" class="button btn-social twitter span-left mr5 btn-block">
                    <span>
                      <i class="fa fa-twitter"></i>
                    </span>Twitter</a>
                </div>
                <div class="col-sm-4">
                  <a href="#" class="button btn-social googleplus span-left btn-block">
                    <span>
                      <i class="fa fa-google-plus"></i>
                    </span>Google+</a>
                </div>
              </div>
            </div>

            <!-- end .form-header section -->
            <form method="post" action="/" id="form-login">
              <div class="panel-body bg-light p30">
                <div class="row">
                  <div class="col-sm-7 pr30">

                    <div class="section row hidden">
                      <div class="col-md-4">
                        <a href="#" class="button btn-social facebook span-left mr5 btn-block">
                          <span>
                            <i class="fa fa-facebook"></i>
                          </span>Facebook</a>
                      </div>
                      <div class="col-md-4">
                        <a href="#" class="button btn-social twitter span-left mr5 btn-block">
                          <span>
                            <i class="fa fa-twitter"></i>
                          </span>Twitter</a>
                      </div>
                      <div class="col-md-4">
                        <a href="#" class="button btn-social googleplus span-left btn-block">
                          <span>
                            <i class="fa fa-google-plus"></i>
                          </span>Google+</a>
                      </div>
                    </div>

                    <div class="section">
                      <label for="username" class="field-label text-muted fs18 mb10">用户名</label>
                      <label for="username" class="field prepend-icon">
                        <input type="text" name="username" id="username" class="gui-input" placeholder="输入用户名" value="admin@qq.com">
                        <label for="username" class="field-icon">
                          <i class="fa fa-user"></i>
                        </label>
                      </label>
                    </div>
                    <!-- end section -->

                    <div class="section">
                      <label for="username" class="field-label text-muted fs18 mb10">密 码</label>
                      <label for="password" class="field prepend-icon">
                        <input type="password" name="password" id="password" class="gui-input" placeholder="输入密码" value="11111">
                        <label for="password" class="field-icon">
                          <i class="fa fa-lock"></i>
                        </label>
                      </label>
                    </div>
                    <!-- end section -->

                  </div>
                  <div class="col-sm-5 br-l br-grey pl30">
                    <h3 class="mb25"> 你将会拥有:</h3>
                    <p class="mb15">
                      <span class="fa fa-check text-success pr5"></span> 无限的邮件存储空间</p>
                    <p class="mb15">
                      <span class="fa fa-check text-success pr5"></span> 无限的照片分享和存储空间</p>
                    <p class="mb15">
                      <span class="fa fa-check text-success pr5"></span> 无限的下载空间</p>
                    <p class="mb15">
                      <span class="fa fa-check text-success pr5"></span> 无限的服务</p>
                  </div>
                </div>
              </div>
              <!-- end .form-body section -->
              <div class="panel-footer clearfix p10 ph15">
                <button type="button" id="loginBtn" class="button btn-primary mr10 pull-right">登录</button>
                <label class="switch ib switch-primary pull-left input-align mt10">
                  <input type="checkbox" name="remember" id="remember" checked>
                  <label for="remember" data-on="YES" data-off="NO"></label>
                  <span>记住我</span>
                </label>
              </div>
              <!-- end .form-footer section -->
            </form>
          </div>
        </div>

      </section>
      <!-- End: Content -->

    </section>
    <!-- End: Content-Wrapper -->

  </div>
  <!-- End: Main -->

  <!-- BEGIN: PAGE SCRIPTS -->
  <%@ include file="/WEB-INF/pages/include/baseJS.jsp"%>
  <!-- CanvasBG Plugin(creates mousehover effect) -->
  <script src="${ctxStatic}/vendor/plugins/canvasbg/canvasbg.js"></script>
  <script src="${ctxStatic}/assets/js/notify.js"></script>
	<script type="text/javascript">
	    $(document).ready(function () {
	    	//当session已经过期的情况下
	    	if(self!=top){
	    		var _href = top.location.href;
	    		var index = _href.indexOf("#");
	    		if(index>0){
	    			top.location.href = "${ctx}/login"+_href.substring(index);;
	    		}else
	    			top.location.href = "${ctx}/login";
			}
	    	 // Init CanvasBG and pass target starting location
	        CanvasBG.init({
	          Loc: {
	            x: window.innerWidth / 2,
	            y: window.innerHeight / 3.3
	          },
	        });
	    	 
            var options = {
                //target: '#output',          //把服务器返回的内容放入id为output的元素中
                beforeSubmit:function showRequest(formData, jqForm, options){
	                //formData: 数组对象，提交表单时，Form插件会以Ajax方式自动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd}]
	                //jqForm:   jQuery对象，封装了表单的元素
	                //options:  options对象
	                return true;  //只要不返回false，表单都会提交,在这里可以对表单元素进行验证
	               },  //提交前的回调函数
                success: function(data, status){//表单初始化
             	   if(data.ok){
             		 var href = window.location.href;
             		 var index = href.indexOf("#");
             		 
             		 if(index>0){
             			var _path = href.substr(index);
             			window.location.href = "${ctx}/index"+_path;
             		 }else
             			window.location.href = "${ctx}/index";
             	   } else
                	   notify('登录失败','用户名/密码错误，请重新登录!','danger',true);
	               },      //提交后的回调函数
	               error: function(data, status){
	            	   
 	           }, 
                url: "${ctx}/auth",                 //默认是form的action， 如果申明，则会覆盖
                type: 'post',               //默认是form的method（get or post），如果申明，则会覆盖
                dataType: 'json',           //html(默认), xml, script, json...接受服务端返回的类型
                //clearForm: true,          //成功提交后，清除所有表单元素的值
                //resetForm: true,          //成功提交后，重置所有表单元素的值
                timeout: 30000               //限制请求的时间，当请求大于3秒后，跳出请求
            }
            $('#loginBtn').click(function(){
         	   $('#form-login').ajaxSubmit(options);
            });
               
	    });
	</script>
  <!-- END: PAGE SCRIPTS -->

</body>

</html>
